<!--
 * @Date: 2023-03-23 13:39:50
 * @LastEditTime: 2023-04-03 19:30:10
 * @FilePath: /NLK/src/components/business/Binvit.vue
 * 介绍:
-->
<script lang="ts" setup>
import { omitText } from "@@/utils/tools/project";
import { _require } from "@@/utils/tools/tools";
import Rdialog from "@@/components/rework/Rdialog";
import { copyText } from "@@/utils/tools/project";
import useUserinfoStore from "@@/store/useUserinfoStore";

const userinfoStore = useUserinfoStore();
const { userinfo } = storeToRefs(userinfoStore);

const { t } = useI18n();
const RdialogRef = ref<InstanceType<typeof Rdialog>>();
function open() {
  RdialogRef.value?.open({
    title: t("yao-qing-hao-you"),
  });
}
defineExpose({ open });
const invit = computed(
  () => `${window.location.origin}/#/?invit=${userinfo.value?.invit}`
);
</script>

<template>
  <Rdialog ref="RdialogRef">
    <div class="T-A-C">领取高达<span>60,00</span>元数字货币</div>
    <div class="T-A-C T-S-sm">
      {{
        $t("yao-qing-hao-you-nin-yu-hao-you-jun-ke-huo-de-nlk-shu-zi-huo-bi")
      }}
    </div>
    <Rimage :src="_require('src/assets/images/Binvit/Binvit_banner.png')" />
    <template #footer>
      <div class="flex-J-SB flex-A-C T-S-sm">
        <div class="invitCard">{{ omitText(invit, [10, "......", 8]) }}</div>
        <VanButton @click="copyText(invit)" class="copyBtn" color="var(--C-T1)">
          {{ $t("fu-zhi") }}
        </VanButton>
      </div>
    </template>
  </Rdialog>
</template>

<style lang="less" scoped>
.invitCard {
  border-radius: var(--R-sm);
  border: 1rem solid var(--C-OT2);
  height: 90rem;
  line-height: 90rem;
  padding: 0 var(--gap-sm);
}
.copyBtn {
  margin-left: var(--gap-sm);
  flex: 1;
  height: 90rem;
  line-height: 90rem;
}
</style>
